<template>
  <el-dialog :visible.sync="dialog"
             title="查看流程历史"
             append-to-body top="0"
             width="90%"
             custom-class="flowImageCls"
             @open="open">
    <div :style="'height:'+ height">
      <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto"/>
    </div>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'

  export default {
    props: {
      processDefinitionId: {
        type: String,
        required: true
      },
      processInstanceId: {
        type: String,
        required: true
      }
    },
    computed: {
      ...mapGetters([
        'baseApi'
      ])
    },
    data() {
      return {
        height: document.documentElement.clientHeight - 94.5 + 'px;',
        dialog: false,
        src: ''
      }
    },
    methods: {
      open() {
        this.src = this.baseApi + '/diagram-viewer/index.html?processDefinitionId=' + this.processDefinitionId + '&processInstanceId=' + this.processInstanceId
      }
    }
  }
</script>
<style>
  .flowImageCls {
    width: 98%;
    height: 95%;
    overflow-y: auto;
  }
</style>
